<template>
  <div class="user">
    <div class="head">
      <h1>个人中心</h1>
    </div>
    <div class="content">
      <div class="useritem">
        <div class="nav">
          <div class="left">
            <div class="img" v-show="!token" @click="login">
              <img src="../assets/img/6.png" alt="" />
            </div>
            <div class="img" v-show="token">
              <img src="../assets/img/1.webp" alt="" />
            </div>
            <h2 v-show="!token" @click="login">登录/注册</h2>
            <h2 v-show="token">handsomeboy</h2>
          </div>
          <div class="right" @click="judgment">
            <img src="../assets/img/right.png" alt="" />
          </div>
        </div>
        <div class="box">
          <ul>
            <li @click="touserAll">
              <div class="dots" v-if="list && list.length > 0">
                {{ updatalist.length }}
              </div>
              <img src="../assets/img/1.png" alt="" />
              <p>全部订单</p>
            </li>
            <router-link tag="li" to="quitbuy">
              <img src="../assets/img/2.png" alt="" />
              <div class="nobuydots" v-if="nobuylist && nobuylist.length > 0">
                {{ nobuylist.length }}
              </div>
              <p>待付款</p>
            </router-link>
            <router-link tag="li" to="./isreceive">
              <img src="../assets/img/3.png" alt="" />
              <div
                class="receivedots"
                v-if="receicelist && receicelist.length > 0"
              >
                {{ receicelist.length }}
              </div>
              <p>待收货</p>
            </router-link>
            <router-link tag="li" to="./isEvaluation">
              <img src="../assets/img/4.png" alt="" />
              <div
                class="evaluation"
                v-if="evaluation && evaluation.length > 0"
              >
                {{ evaluation.length }}
              </div>
              <p>待评价</p>
            </router-link>
            <router-link tag="li" to="./after">
              <img src="../assets/img/5.png" alt="" />
              <div class="after" v-if="after && after.length > 0">
                {{ after.length }}
              </div>
              <p>售后</p>
            </router-link>
          </ul>
        </div>
      </div>
      <div class="session">
        <ul>
          <li @click="judgment">
            <p>地址管理</p>
            <div class="img">
              <img src="../assets/img/right.png" alt="" />
            </div>
          </li>
          <li @click="judgment">
            <p>我的优惠劵</p>
            <div class="img">
              <img src="../assets/img/right.png" alt="" />
            </div>
          </li>
          <li @click="judgment">
            <p>优先购买码</p>
            <div class="img">
              <img src="../assets/img/right.png" alt="" />
            </div>
          </li>
        </ul>
      </div>
      <div class="session">
        <ul>
          <li>
            <p>常见问题</p>
            <div class="img">
              <img src="../assets/img/right.png" alt="" />
            </div>
          </li>
          <li>
            <p>服务支持</p>
            <div class="img">
              <img src="../assets/img/right.png" alt="" />
            </div>
          </li>
        </ul>
      </div>
      <div class="session">
        <ul>
          <li>
            <p>意外碎屏保修服务</p>
            <div class="img">
              <img src="../assets/img/right.png" alt="" />
            </div>
          </li>
          <li>
            <p>延长保修服务</p>
            <div class="img">
              <img src="../assets/img/right.png" alt="" />
            </div>
          </li>
          <li>
            <p>协议政策</p>
            <div class="img">
              <img src="../assets/img/right.png" alt="" />
            </div>
          </li>
          <li>
            <p>资质证照</p>
            <div class="img">
              <img src="../assets/img/right.png" alt="" />
            </div>
          </li>
          <li>
            <p>活动说明</p>
            <div class="img">
              <img src="../assets/img/right.png" alt="" />
            </div>
          </li>
        </ul>
      </div>
    </div>

    <buttomtag></buttomtag>
  </div>
</template>

<script>
import buttomtag from "../components/TestoCom.vue";
export default {
  props: ["updatalist"],
  data() {
    return {
      token: "",
      list: null,
      receicelist: null,
      evaluation: null,
      after: null,
      nobuylist: null,
      num1: null,
    };
  },
  methods: {
    login() {
      this.$router.push("/login");
    },
    judgment() {
      window.localStorage.getItem("token");
      var flag = window.localStorage.getItem("token");
      if (flag) {
        this.$router.push("/userlogin");
      } else {
        this.$router.push("/login");
      }
    },
    touserAll() {
      this.$router.push("/havebuy");
    },
  },
  components: {
    buttomtag,
  },
  created() {
    this.token = window.localStorage.getItem("token");
    if (this.updatalist) {
      this.updatalist.forEach((item) => {
        item.list.buycheck = true;
      });
      //全部订单
      this.list = this.updatalist.filter((item) => {
        return (
          (item.list.isEvaluation == false || item.list.isreceive == false) &&
          item.list.buycheck == true
        );
      });

      // console.log(this.list.length);
      // 待收货订单
      this.receicelist = this.updatalist.filter((item) => {
        return item.list.isreceive == false && item.list.buycheck == true;
      });

      // 待评价订单
      this.evaluation = this.updatalist.filter((item) => {
        return (
          item.list.isEvaluation == false &&
          item.list.isreceive == true &&
          item.list.buycheck == true
        );
      });

      // 售后订单
      this.after = this.updatalist.filter((item) => {
        return (
          item.list.isEvaluation == true &&
          item.list.isreceive == true &&
          item.list.buycheck == true
        );
      });
    }
     //  未确定订单
    if (this.$route.query.id==1&&this.updatalist) {
      //  待付款订单
      this.nobuylist = this.updatalist.forEach((item) => {
           item.list.buycheck = false;
      });
      console.log(this.nobuylist);
    }

  },
};
</script>

<style lang="scss" scoped>
.user {
  .head {
    width: 100%;
    height: 50px;
    //    margin-bottom: 20px;
    border-bottom: 1px solid #dbdbdb;
    h1 {
      width: 70%;
      margin: 0 auto;
      text-align: center;
      line-height: 50px;
      color: rgba(0, 0, 0, 0.6);
      font-size: 18px;
      font-weight: 700;
    }
  }
  .content {
    width: 100%;
    background-color: rgb(240, 240, 240);
    margin-bottom: 80px;
    .useritem {
      width: 90%;
      // height: 160px;
      margin: 0 auto;
      background-color: #fff;
      border-radius: 10px;
      // margin-top: 20px;
      position: relative;
      top: 20px;

      .nav {
        width: 100%;
        height: 90px;

        display: flex;

        .left {
          display: flex;
          width: 90%;
          margin: 0 auto;
          height: 60px;
          padding: 15px 0;
          .img {
            width: 20%;
            height: 60px;
            border: 50%;
            border-radius: 50%;
            overflow: hidden;
            margin-left: 20px;
            img {
              width: 100%;
              height: 60px;
            }
          }
          h2 {
            height: 60px;
            flex: 1;
            line-height: 60px;
            margin-left: 20px;
            font-weight: 700;
            font-size: 16px;
          }
        }
        .right {
          width: 10%;
          display: flex;
          height: 60px;
          padding: 15px 0;
          flex-direction: column;
          justify-content: center;
          img {
            width: 30%;
            height: 30%;
            display: block;
            margin: 0 auto;
          }
        }
      }
      .box {
        width: 100%;
        height: 62px;
        margin: 0 auto;
        position: relative;

        ul {
          width: 100%;
          height: 100%;
          display: flex;
          li {
            .dots {
              position: absolute;
              top: 2px;
              left: 45px;
              width: 15px;
              height: 15px;
              background-color: red;
              border-radius: 50%;
              text-align: center;
              color: #fff;
              font-size: 10px;
            }
            .receivedots {
              position: absolute;
              top: 2px;
              left: 180px;
              width: 15px;
              height: 15px;
              background-color: red;
              border-radius: 50%;
              text-align: center;
              color: #fff;
              font-size: 10px;
            }
            .nobuydots {
              position: absolute;
              top: 2px;
              left: 118px;
              width: 15px;
              height: 15px;
              background-color: red;
              border-radius: 50%;
              text-align: center;
              color: #fff;
              font-size: 10px;
            }
            .evaluation {
              position: absolute;
              top: 2px;
              left: 248px;
              width: 15px;
              height: 15px;
              background-color: red;
              border-radius: 50%;
              text-align: center;
              color: #fff;
              font-size: 10px;
            }
            .after {
              position: absolute;
              top: 2px;
              left: 316px;
              width: 15px;
              height: 15px;
              background-color: red;
              border-radius: 50%;
              text-align: center;
              color: #fff;
              font-size: 10px;
            }
            width: 25%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-content: flex-end;
            align-items: center;
            border-right: 1px solid rgb(230, 228, 228);
            img {
              display: block;
              width: 30%;
              height: 40%;
            }
            p {
              font-size: 12px;
              color: rgb(170, 170, 170);
            }
          }
        }
      }
    }
    .session {
      width: 90%;
      margin: 30px auto;

      background-color: #fff;
      border-radius: 10px;
      ul {
        li {
          width: 100%;
          height: 60px;
          display: flex;

          p {
            width: 90%;
            height: 30px;
            line-height: 30px;
            padding: 15px;
            font-size: 18px;
            color: #4f4e4e;
          }
          .img {
            width: 10%;
            height: 20px;

            padding: 20px 2px;

            img {
              width: 30%;
              height: 20px;
              display: block;
              margin: 0 auto;
            }
          }
        }
      }
    }
  }
}
</style>